<template>
    <view
        class="content"
        :class="['content-' + message.flow]"
        @longpress="showControl"
        @tap="messageTap"
        ref="mes_content"
    >
        <!-- <image class="dot" :class="[message.flow]" :src="'/static/im/mes-'+message.flow+'.png'"></image> -->

        <!-- <view class="dot" :class="[message.flow]"></view> -->
        <template v-for="(item, index) in data.text" :key="index">
            <rich-text
                @longpress="showControl"
                class="text"
                v-if="item.name === 'text'"
                :nodes="item.nodes"
                style="background-color: transparent"
                :style="{ color: color }"
            ></rich-text>

            <!-- <text class="text" v-if="item.name === 'text'">{{ item.text }}</text> -->
            <!-- <text class="text" v-if="item.name === 'text'">{{ item.text }}</text> -->
            <!-- <img class="text-img" v-else-if="item.name === 'img'" :src="item.src"/> -->
        </template>

        <!-- <text class="text">阿萨德拉克手动记录看接口来家里看框架</text>
            <image class="text-img" src="/static/img/1.jpg"/>
            <text class="text">阿萨德</text>
            <image class="text-img" src="/static/img/1.jpg"/> -->
    </view>
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect, reactive, toRefs } from "vue";
import { fixUrl } from "@/utils/utils";

const MessageText = defineComponent({
    components: {},

    props: {
        data: {
            type: Object,
            default: () => {
                return {};
            },
        },
        messageData: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    setup(props: any, ctx: any) {
        const data = reactive({
            data: {},
            color: "#333",
            message: {},
            tapArr: [],
        });

        const mes_content = ref(null);

        const stopPop = (e: any) => {
            e.preventDefault();
            e.stopPropagation();
        };

        const messageTap = (e: any) => {
            e.preventDefault();
            e.stopPropagation();
            uni.hideKeyboard();
            console.log(data.tapArr);

            if (!data.tapArr.length) {
                return;
            }

            if (data.tapArr.length === 1) {
                const { type, val } = data.tapArr[0];
                if (type === "phone") {
                    makePhoneCall(val);
                }
                if (type === "link") {
                    openLink(val);
                }

                return;
            }

            const itemList = data.tapArr.map((item) => {
                if (item.type === "phone") {
                    return `拨打${item.val}`;
                }

                if (item.type === "link") {
                    return `打开${item.val}`;
                }
            });

            uni.showActionSheet({
                //title: "是否删除该条消息?",
                //itemColor: "#23e2a6",
                itemList: itemList,
                success: async (res) => {
                    let { type, val } = data.tapArr[res.tapIndex];
                    if (type === "phone") {
                        makePhoneCall(val);
                    }
                    if (type === "link") {
                        openLink(val);
                    }
                },
            });
        };

        const showControl = async (e: any) => {
            e.preventDefault();
            e.stopPropagation();

            let refPos = null;

            await new Promise((callback) => {
                const dom = weex.requireModule("dom");
                dom.getComponentRect(mes_content.value, (e) => {
                    refPos = e.size;
                    callback(e);
                });
            });
            const obj = {
                refPos,
                message: data.message,
            };
            uni.$emit("showControl", obj);
            uni.$emit("longPressLock");
        };

        const makePhoneCall = (phone: any) => {
            uni.makePhoneCall({
                phoneNumber: phone,
                fail(err) {
                    console.log("eeeeeeeeeeeee");
                    console.log(err);
                    uni.showToast({
                        icon: "none",
                        title: err.message,
                        duration: 2000,
                    });
                },
            });
        };

        const openLink = (link: string) => {
            uni.navigateTo({
                url: `/pages/webview/webview?url=${link}`,
            });
        };

        watchEffect(() => {
            data.tapArr = [];
            let str = props.data;
            // console.log('sssssss')
            // console.log(str)
            if (props.messageData.flow === "out") {
                data.color = "#fff";
            }

            props.data.text.forEach((item) => {
                if (item.name === "text") {
                    let str = item.text;
                    const reg = /(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}/g;
                    const linkReg =/[(http|ftp|https):\/\/]?([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/g;

                    let nodes = `${str.replace(reg, (s: any) => {
                        data.tapArr.push({
                            type: "phone",
                            val: s,
                        });

                        return `<span style="color:#566c94;">${s}</span>`;
                    })}`;

                    // nodes = nodes.replace(linkReg, (s: any) => {
                    //     data.tapArr.push({
                    //         type: "link",
                    //         val: fixUrl(s),
                    //     });

                    //     return `<span style="color:#566c94;">${s}</span>`;
                    // });

                    item.nodes = nodes;
                } else {
                    item.nodes = item.text;
                }
            });

            data.tapArr = Array.from(new Set(data.tapArr));

            data.data = props.data;
            data.message = props.messageData;
        });
        return {
            mes_content,
            showControl,
            stopPop,
            messageTap,
            ...toRefs(data),
        };
    },
});
export default MessageText;
</script>
<style lang="scss">
</style>


<style lang="scss" scoped>
// .text-img {
//   width: 42rpx;
//   height: 42rpx;
//   display: inline-block;
// }
.content {
    flex: 1;
    position: relative;
    //padding:7px 12px;
    border-radius: 50rpx;
    min-width: 65rpx;

    &-in {
        background: #fff;
        padding: 10px 20px 10px 20px;
        .text {
            color: $slim_text3;
            font-size: 17px;
        }
    }
    &-out {
        background: #1dc691;
        padding: 10px 20px 10px 20px;
        .text {
            color: #fff;
            font-size: 16px;
        }
    }
}

.aaa {
    display: flex;
    align-items: center;
    flex-direction: row;
}
</style>
